<template>
  <a-layout class="common-layout">
    <a-layout-sider
      v-model="collapsed"
      :trigger="null"
      collapsible
      style="background: #fff"
    >
      <a-menu mode="inline" :default-selected-keys="[0]">
        <template v-for="(menu, i) in menus">
          <a-menu-item v-if="!menu.children" :key="i">
            <router-link :to="menu.route" class="aside-menu-link">
              <a-icon :type="menu.iconname" />
              <span>{{ menu.menulabel }}</span>
            </router-link>
          </a-menu-item>
          <sub-menu v-else :key="i" :menu-info="menu" />
        </template>
      </a-menu>
    </a-layout-sider>
    <a-layout>
      <a-layout-header style="background: #fff; padding: 0">
        <a-icon
          class="trigger"
          :type="collapsed ? 'menu-unfold' : 'menu-fold'"
          @click="handleCollapseChange"
        />

        <el-tree v-show="isPageOfPlanning"
        :data="nodeData"
        node-key="id"
        :default-expanded-keys="['source', 'preHandle', 'sign', 'learn']"
        icon-class="el-icon-arrow-right"
        :render-content="renderContentFunction"
        :props="defaultProps"
        style="float: right;width: 405px;margin-top: 18px;"
      ></el-tree>

      </a-layout-header>

      <a-layout-content class="layout-content" ref="layoutContent">
        <!-- <div class="layout-util">
          <a-button type="link" @click="switchfullscreen">
            <a-icon :type="isFullscreen ? 'fullscreen' : 'fullscreen-exit'" />
          </a-button>
        </div> -->
        <router-view></router-view>
      </a-layout-content>
    </a-layout>
  </a-layout>
</template>

<script>
import menus from "../configs/menu.config.js";
import SubMenu from "./submenu.vue";
import bus from "@/utils/bus";
import { fullScreen } from "@/utils/index";
export default {
  components: {
    SubMenu,
  },
  data() {
    return {
      menus,
      isFullscreen: false,
      collapsed: false,
      isPageOfPlanning: false,

      defaultProps:{
        children: "children",
        label: "label",
      },
      nodeData:[
      {
        label: "菱形",
        id: "diamond",
        icon: "el-icon-connection",
        type: 'diamond'
        // diamond
      },
      {
        label: "长方形",
        id: "ellipse",
        icon: "el-icon-dish-1",
        type: 'ellipse'
        // ellipse
      },
      {
        label: "矩形",
        id: "square",
        icon: "el-icon-cpu",
        type: 'square'
        // square
      }
    ]
    };
  },

  watch: {
    "$route.path": function(newVal, oldVal) {
      console.log("this.$route.path", newVal,oldVal);
      this.isPageOfPlanning = newVal == "/planning";
    }
  },

  created(){
    this.isPageOfPlanning = this.$route.path == "/planning";
  },

  methods: {
    handleCollapseChange() {
      this.collapsed = !this.collapsed;
      bus.$emit("sidebarChange");
    },
    switchfullscreen() {
      if (this.isFullscreen) {
        fullScreen.inactivate();
        this.isFullscreen = false;
        fullScreen.isFullscreen = false;
      } else {
        fullScreen.activate(this.$refs.layoutContent.$el);
        this.isFullscreen = true;
        fullScreen.isFullscreen = true;
      }
    },
    dragHandle(ev) {
      ev.dataTransfer.setData("target-id", ev.target.id);
      ev.dataTransfer.setData("target-type", ev.target.getAttribute("type"));
    },
    renderContentFunction(h, { node, data }) {
      const className = node.expanded
        ? "el-icon-folder-opened"
        : "el-icon-folder";
      const classNameChild = !data.children && data.icon ? data.icon : "";
      return h(
        "div",
        {
          class: { leafNode: !data.children },
          style: {
            fontSize: "12px",
            color: "#1b1c23",
          },
        },
        [
              h(
                "span",
                {
                  attrs: {
                    draggable: !data.children,
                    id: data.id,
                    type: data.type
                  },
                  on: {
                    dragstart: this.dragHandle,
                  },
                  class: "node",
                  style: {
                    display: "inline-block",
                    marginTop: "15px",
                    height: "56px ",
                    lineHeight: "40px",
                    width: "60px",
                    marginLeft: "6px",
                    position: "relative",
                    borderRadius: "20px",
                    outline: "none"
                  },
                },
                [
                  h("i", {
                    class: {
                      [className]: !!data.children,
                      [classNameChild]: !data.children,
                    },
                    style: {
                      color: "#00cdea",
                      marginLeft: data.children ? "10px" : "15px",
                    },
                  }),
                  h(
                    "span",
                    {
                      style: {
                        fontSize: "13px",
                        marginLeft: "10px",
                      },
                    },
                    data.label
                  ),
                ]
              ),
            ]
      );
    }
  }
};
</script>

<style lang="less">

[role="treeitem"]{
  float: left;
}

#diamond,#square,#ellipse{
  width: 100px !important;
}

.el-tree-node__content>.el-tree-node__expand-icon{
  display: none;
}

// .el-tree-node__content{
//   background: none !important;
// }

.common-layout {
  height: 100%;
}
.common-layout .trigger {
  margin-left: 20px;
}
.common-layout .ant-layout-sider {
  overflow: hidden;
  min-width: 260px !important;
  border-right: 1px solid #e8e8e8;
}
.common-layout .ant-layout-sider-collapsed {
  min-width: 79px !important;
}
.common-layout .ant-menu {
  border: none;
}
.layout-content {
  position: relative;
  margin: 24px 16px;
  padding: 20px;
  background: #fff;
  min-height: 280px;
  overflow: auto;
  .layout-util {
    position: absolute;
    right: 10px;
    top: 0;
  }
}
</style>
